﻿<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Molgav export</title>
		<meta charset="utf-8">
		<script src="localstore.js"></script>
		<script src="MidiCompiler.js"></script>
		<script src="WebAudioFontPlayer.js"></script>
		<script src="0300_LesPaul_sf2_file.js"></script>
		<script src="0280_LesPaul_sf2_file.js"></script>
		<script src="0250_Chaos_sf2_file.js"></script>
		<!--<script src="0170_JCLive_sf2_file.js"></script>-->
		<script src="0170_SBLive_sf2.js"></script>
		<script src="0001_FluidR3_GM_sf2_file.js"></script>
		<script src="0340_Aspirin_sf2_file.js"></script>
		<script src="0390_GeneralUserGS_sf2_file.js"></script>
		<script src="0490_Chaos_sf2_file.js"></script>
		<script src="12835_0_Chaos_sf2_file.js"></script>
		<script src="12838_22_FluidR3_GM_sf2_file.js"></script>
		<script src="12841_26_JCLive_sf2_file.js"></script>
		<script src="12842_26_JCLive_sf2_file.js"></script>
		<script src="12845_26_JCLive_sf2_file.js"></script>
		<script src="12846_26_JCLive_sf2_file.js"></script>
		<script src="12849_26_JCLive_sf2_file.js"></script>
		<script src="12851_26_JCLive_sf2_file.js"></script>
		<script src="set.js"></script>
		<style>
			html, body {
				font-family: 'Gidugu', serif;
				background-color:#000;
				color: #fff;	
				font-size: xx-large;
				text-align: center;
			}
			a {
				color: #99f;
				text-decoration: none;
			}
			h1 {
				text-align: center;
				border-bottom: 1px solid #333;
			}
			.ftr {
				text-align: left;
				border-top: 1px solid #333;
			}
			.cntr {
				text-align: left;
				display: inline-block;
			}
			@font-face {
			  font-family: 'Gidugu';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Gidugu'), url(gidugu.woff2) format('woff2');
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
			}
		</style>
	</head>
	<body>
		<h1>Export</h1>
		<div class='cntr'>
			<ul>
				<li><a href='javascript:promptExport();'>Export to .mid</a></li>
				<li>Work area screenshot <!--<a href='javascript:setBgMode(0);'>dark</a> | <a href='javascript:setBgMode(1);'>silver</a> | <a href='javascript:setBgMode(2);'>light</a>-->:</li>
			</ul>
		</div>
		<div>
			<!--<span><svg id="contentSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display2:none; padding: 0px; margin: 0px; width: 600px; height: 400px; background:#111">
					</svg></span>
					-->
			<canvas id='cnvs' style="display:none;"></canvas>
		</div>
		<div id="pngdiv" style='width: 100%;'><img id="rsltimg" /></div>
		<p class="ftr">Return to <a href="index.html">editor</a></p>
		<script>
			var storeDrums = readObjectFromlocalStorage('storeDrums');
			var storeTracks = readObjectFromlocalStorage('storeTracks');
			var flatstate = readObjectFromlocalStorage('flatstate');
			var bgMode = sureInList(readTextFromlocalStorage('bgMode'), 0, [0,1,2]);
			var mltpl = 16;
			var lvlsh = 0.75;
			var hh = 0;
			var ww = 0;
			var bg=modeBackground(bgMode);
			var fg=modeDrumColor(bgMode);
			var ntColor=modeNoteName(bgMode);
			for(var ss=0;ss<document.styleSheets.length;ss++){
				var stylrSheet=document.styleSheets[ss];
				for(var ru=0;ru<stylrSheet.cssRules.length;ru++){
					var cssRule=stylrSheet.cssRules[ru];
					if(cssRule.selectorText){
						if(cssRule.selectorText.includes('html')){
							cssRule.style.setProperty('background-color',bg,null);
							cssRule.style.setProperty('color',fg,null);
						}
					}
				}
			}
			/*function setBgMode(bg) {
				console.log('setBgMode',bg);
				saveText2localStorage('bgMode', '' + this.tempo);
			}*/
			/*function modeDrumColor() {
				if(bgMode==2){
					return '#333';
				}
				return '#ccc';
			}
			function modeBackground  () {
				if(bgMode==1){
					return '#31424C';
				}
				if(bgMode==2){
					return '#C8D1D2';
				}
				return '#000609';
			};*/
			function promptExport() {
				var compiler = new MidiCompiler();
				//var storeDrums=readObjectFromlocalStorage('storeDrums');
				//var storeTracks=readObjectFromlocalStorage('storeTracks');
				compiler.exportMidi(storeDrums, storeTracks);
			}
			function savePicture() {
				console.log('savePicture');
				var contentSVG = document.getElementById('contentSVG');
				contentSVG.width = ww;
				contentSVG.height = hh;
				var svgString = new XMLSerializer().serializeToString(contentSVG);
				var cnvs = document.getElementById("cnvs");
				cnvs.width = ww;
				cnvs.height = hh;
				var ctx = cnvs.getContext("2d");
				//console.log('contentSVG'+contentSVG);
				//ctx.drawImage(contentSVG ,0,0);


				var _self = self.URL || self.webkitURL || self;
				//var img = new Image();
				var img = document.getElementById('rsltimg');
				var svg = new Blob([svgString], {
						type: "image/svg+xml;charset=utf-8"
					});
				var url = _self.createObjectURL(svg);
				img.onload = function () {
					ctx.drawImage(img, 0, 0);
					var png = cnvs.toDataURL("image/png");
					//document.getElementById('pngdiv').innerHTML = '<img  width="100%" src="'+png+'"/>';
					//var rsltimg = document.getElementById('rsltimg');
					//rsltimg.src = png;
					//_self.revokeObjectURL(png);
					//console.log(img);
				};
				img.src = url;

			}
			var ns = "http://www.w3.org/2000/svg";
			function line(svg, x1, y1, x2, y2, color) {
				lineStroke(svg, x1, y1, x2, y2, color, mltpl * 0.8);
			}
			function lineStroke(svg, x1, y1, x2, y2, color, strokeWidth) {
				var line = document.createElementNS(ns, 'line');
				line.setAttribute('x1', x1);
				line.setAttribute('y1', y1);
				line.setAttribute('x2', x2);
				line.setAttribute('y2', y2);
				line.setAttribute('stroke', color);
				line.setAttribute('stroke-width', strokeWidth);
				line.setAttribute('stroke-linecap', 'round');
				svg.appendChild(line);
			}
			function text(svg, x, y, t) {
				var txt = document.createElementNS(ns, 'text');
				txt.setAttributeNS(null, 'x', x - mltpl * 0.3);
				txt.setAttributeNS(null, 'y', y + mltpl * 0.3);
				txt.setAttributeNS(null, 'font-size', mltpl * 0.7);
				txt.setAttributeNS(null, 'fill', ntColor);
				txt.innerHTML = t;
				svg.appendChild(txt);
			}
			function pitchName(pitch) {
				var o = Math.ceil(pitch / 12);
				var n = pitch % 12;
				var t = 'C';
				if (n == 1) {
					t = 'C#';
				}
				if (n == 2) {
					t = 'D';
				}
				if (n == 3) {
					t = 'D#';
				}
				if (n == 4) {
					t = 'E';
				}
				if (n == 5) {
					t = 'F';
				}
				if (n == 6) {
					t = 'F#';
				}
				if (n == 7) {
					t = 'G';
				}
				if (n == 8) {
					t = 'G#';
				}
				if (n == 9) {
					t = 'A';
				}
				if (n == 10) {
					t = 'A#';
				}
				if (n == 11) {
					t = 'B';
				}
				return '' + t;
			}
			function blackKey(pitch) {
				var o = Math.ceil(pitch / 12);
				var n = pitch % 12;
				if (n == 1) {
					return true;
				}
				if (n == 3) {
					return true;
				}
				if (n == 6) {
					return true;
				}
				if (n == 8) {
					return true;
				}
				if (n == 10) {
					return true;
				}
				return false;
			}
			function drawPiece() {
				var svg = document.getElementById('contentSVG');
				var hasDrums = storeDrums.length > 0;
				var minPitch = 12 * 5;
				var maxPitch = 0;
				var maxBeat = 1;
				for (var i = 0; i < storeDrums.length; i++) {
					var b = storeDrums[i].beat;
					//console.log(b,storeDrums[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
				}
				for (var i = 0; i < storeTracks.length; i++) {
					var b = storeTracks[i].beat + storeTracks[i].length - 1;
					//console.log(b,storeTracks[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
					var p = storeTracks[i].pitch;
					if (p > maxPitch) {
						maxPitch = p;
					}
					if (p < minPitch) {
						minPitch = p;
					}
				}
				var len = Math.floor(maxBeat / 16) + 1;
				//console.log(hasDrums,len,maxBeat,minPitch,maxPitch);
				ww = len * 16 * mltpl;
				hh = 0;
				if (hasDrums) {
					hh = hh + 8 * mltpl;
				}
				if (maxPitch >= minPitch) {
					hh = hh + (maxPitch - minPitch + 1) * mltpl;
				}
				if (hh > 0) {
					for (var i = 0; i < maxPitch - minPitch + 1; i++) {
						if (!blackKey(maxPitch - i)) {
							lineStroke(svg, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, '#222', 0.8 * mltpl);
						}
					}
					for (var i = 16 * mltpl; i < ww; i = i + 16 * mltpl) {
						lineStroke(svg, i, 0, i, hh, '#000', 1);
					}
					for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
						lineStroke(svg, i, 0, i, hh, '#000', 0.25);
					}
					if (hasDrums) {
						for (var i = 0; i < 8; i++) {
							lineStroke(svg, 0, hh - (8 - i) * mltpl, ww, hh - (8 - i) * mltpl, '#000', 0.25);
						}
						for (var i = 0; i < storeDrums.length; i++) {
							var x1 = storeDrums[i].beat * mltpl + 0.5 * mltpl;
							var y1 = hh - 8 * mltpl + storeDrums[i].drum * mltpl + 0.5 * mltpl;
							line(svg, x1, y1, x1 + 1, y1, '#fff');
						}
					}
					for (var i = 0; i < 8; i++) {
						var o = sureNumeric(flatstate.orders[i], 0, i, 7);
						trackInfo[i].order = o;
					}

					for (var o = 0; o < 8; o++) {
						for (var i = 0; i < storeTracks.length; i++) {
							if (trackInfo[7 - storeTracks[i].track].order == 7 - o) {
								var x1 = storeTracks[i].beat * mltpl + 0.5 * mltpl;
								var y1 = (maxPitch - storeTracks[i].pitch) * mltpl + 0.5 * mltpl;
								var x2 = x1 + 1 + (storeTracks[i].length - 1) * mltpl;
								var y2 = y1 - storeTracks[i].shift * mltpl;
								line(svg, x1, y1, x2, y2, trackInfo[7 - storeTracks[i].track].color);
								text(svg, x1, y1, pitchName(storeTracks[i].pitch));
							}
						}
					}
				}
			}
			function drawNoteLine(context2D, x1, y1, x2, y2, color) {
				drawLine(context2D, x1, y1, x2, y2, color, mltpl * 0.8);
			}
			function drawLine(context2D, x1, y1, x2, y2, color, strokeWidth) {
				context2D.lineCap = "round";
				context2D.lineWidth = strokeWidth;
				context2D.strokeStyle = color;
				context2D.beginPath();
				context2D.moveTo(x1, y1);
				context2D.lineTo(x2, y2);
				context2D.stroke();
			}
			function drawText(context2D, x, y, t) {
				context2D.font =   "bold 9px sans-serif";
				//context2D.fillStyle = "#ffffff";
				//context2D.fillText(t, x - 0.25 * mltpl + 1, y + 0.25 * mltpl + 1);
				context2D.fillStyle = ntColor;
				context2D.fillText(t, x - 0.25 * mltpl, y + 0.25 * mltpl);
			}
			function drawBTx(context2D, x, y, t) {
				context2D.font =  "bold 11px sans-serif";
				context2D.fillStyle = "rgba(127,127,127,0.75)";
				context2D.fillText(t, x - 0.25 * mltpl , y  );
			}
			function drawNTx(context2D, x, y, t) {
				context2D.font =  "bold 29px sans-serif";
				context2D.fillStyle = "rgba(127	,127,127,0.5)";
				context2D.fillText(t, x - 0.25 * mltpl , y  );
			}
			function drawCanvas() {
				var cnvs = document.getElementById("cnvs");
				var hasDrums = storeDrums.length > 0;
				var minPitch = 12 * 5;
				var maxPitch = 0;
				var maxBeat = 1;
				for (var i = 0; i < storeDrums.length; i++) {
					var b = storeDrums[i].beat;
					if (b > maxBeat) {
						maxBeat = b;
					}
				}
				for (var i = 0; i < storeTracks.length; i++) {
					var b = storeTracks[i].beat + storeTracks[i].length - 1;
					//console.log(b,storeTracks[i]);
					if (b > maxBeat) {
						maxBeat = b;
					}
					//console.log(storeTracks[i].pitch,storeTracks[i].shift);
					var max = Math.max(storeTracks[i].pitch, storeTracks[i].pitch + storeTracks[i].shift);
					var min = Math.min(storeTracks[i].pitch, storeTracks[i].pitch + storeTracks[i].shift);
					if (max > maxPitch) {
						maxPitch = max;
					}
					if (min < minPitch) {
						minPitch = min;
					}
				}
				//console.log(maxPitch,minPitch);
				var len = Math.floor(maxBeat / 16) + 1;
				ww = len * 16 * mltpl;
				hh = 0;
				var drumUses = [false, false, false, false, false, false, false, false];
				for (var i = 0; i < storeDrums.length; i++) {
					drumUses[storeDrums[i].drum] = true;
				}

				var drCount = 0;
				for (var i = 0; i < 8; i++) {
					if (drumUses[i]) {
						drCount++;
						drumUses[i] = drCount;

					}
				}

				if (drCount) {
					hh = hh + drCount * mltpl;
				}
				if (maxPitch >= minPitch) {
					hh = hh + (maxPitch - minPitch + 1) * mltpl;
				}

				cnvs.width = ww;
				cnvs.height = hh;
				var context2D = cnvs.getContext("2d");
				context2D.fillStyle = bg;
				context2D.fillRect(0, 0, ww, hh);

				if (hh > 0) {
					for (var i = 0; i < maxPitch - minPitch + 1; i++) {
						if (blackKey(maxPitch - i)) {
							drawLine(context2D, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, 'rgba(0,0,0,0.15)',  mltpl*0.9);
						}else{
							drawLine(context2D, 0, (i + 0.5) * mltpl, ww, (i + 0.5) * mltpl, 'rgba(255,255,255,0.15)',  mltpl*0.9);
						}
					}
					for (var i = 16 * mltpl; i < ww; i = i + 16 * mltpl) {
						drawLine(context2D, i, 0, i, hh,  bg, 2);
					}
					for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
						drawLine(context2D, i, 0, i, hh,bg, 0.5);
					}
					
					if (hasDrums) {
						//drawText(context2D, 0.5*mltpl, (0.2+maxPitch - minPitch+1)*mltpl, "test 123");
						for (var i = 0; i < drCount; i++) {
							drawLine(context2D, 0, hh - (drCount - i) * mltpl, ww, hh - (drCount - i) * mltpl, '#666', 0.15);
						}
						for (var i = 1 * mltpl; i < ww; i = i + 1 * mltpl) {
							drawLine(context2D, i, hh - drCount  * mltpl, i, hh, '#666', 0.15);
						}
						
						for (var i = 0; i < storeDrums.length; i++) {
							var x1 = storeDrums[i].beat * mltpl + 0.5 * mltpl;
							var y1 = hh - drCount * mltpl + drumUses[storeDrums[i].drum] * mltpl - 0.5 * mltpl;
							drawNoteLine(context2D, x1, y1, x1 + 1, y1,  fg);
						}
						
						
						var s = maxPitch - minPitch;
						if (s < 0) {
							s = -1.0;
						}
						
						for (var i = 0; i < 8; i++) {
							if (drumUses[i]) {
								drawBTx(context2D, 0.5 * mltpl, (0.75 + s + drumUses[i]) * mltpl, drumInfo[i].title);
							}
						}


					}
					
					for (var i = 0; i < 8; i++) {
						var o = sureNumeric(flatstate.orders[i], 0, i, 7);
						trackInfo[i].order = o;
					}

					for (var o = 0; o < 8; o++) {
						for (var i = 0; i < storeTracks.length; i++) {
							if (trackInfo[7 - storeTracks[i].track].order == 7 - o) {
								var x1 = storeTracks[i].beat * mltpl +0.5*mltpl;
								var y1 = (maxPitch - storeTracks[i].pitch) * mltpl+0.5*mltpl ;
								var x2 = x1 + 1 + (storeTracks[i].length - 1) * mltpl;
								var y2 = y1 - storeTracks[i].shift * mltpl;
								//lvlsh = 0.75;
								drawNoteLine(context2D, x1+(7-o)*lvlsh, y1-(7-o)*lvlsh, x2+(7-o)*lvlsh, y2-(7-o)*lvlsh, trackInfo[7 - storeTracks[i].track].color);
								if(o==7){
									
									drawText(context2D, x1, y1, pitchName(storeTracks[i].pitch));
									
								}
							}
						}
					}
					
					var bn=1;
					for (var i = 0; i < ww; i=i+16*mltpl) {
						drawNTx(context2D,i+14*mltpl, 1.9 * mltpl,  ''+bn);
						bn++;
					}
					for (var i = minPitch; i <= maxPitch; i++) {
						var n=maxPitch+minPitch-i;
						if(!(n%12)){
							drawNTx(context2D, 0.5 * mltpl, (0.75 -minPitch+i) * mltpl, 'C'+(1+n/12));
						}
					}
					
					
				}
			}
			function drawImage() {
				var cnvs = document.getElementById("cnvs");
				var rsltimg = document.getElementById('rsltimg');

				//console.log(ww,window.innerWidth);
				var dataURL = cnvs.toDataURL();
				rsltimg.src = dataURL;

				if(ww<window.innerWidth){
					rsltimg.style.width = ww+'px';
				}else{
					rsltimg.style.width = '100%';
				}
			}
			drawCanvas();
			drawImage();
		</script>
	</body>
</html>
